<template>
	<div class="search">
		<div v-if="isHeader">
		<div class="search-header">
			<div class="sh-back"
				@click="goBack()" 
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="sh-content">
				<i class="icon" v-show="this.type == 1"></i>
				<i class="icon pdd" v-show="this.type == 3"></i>
				<i class="icon jd" v-show="this.type == 2"></i>
				<input type="text" 
					placeholder="先领券再购物" 
					v-model.trim="keyword"
				>
			</div>
			<div class="sh-btn"
				@click="goSearch()"
			>
				<p>搜索</p>
			</div>
		</div>
		<div class="float-key"
			v-if="this.keyList.length > 0"
		>
			<div class="fy-item border-1px"
				v-for="(item, index) in keyList"
				@click="goKey(item)"
			>
				<p v-html="item[0]"></p>
				<i class="iconfont">&#xe787;</i>
			</div>
		</div>
		<div class="bignav"
			v-if="searchShow != 2 && type == 1"
		>
			<div class="bignav-item">
				<p :class="{'common-color': searchShow == 1}" @click="select(1)">全部</p>
			</div>
			<div class="bignav-item">
				<p :class="{'common-color': searchShow == 0}" @click="select(2)">搜券</p>
			</div>			
		</div>
		<div class="bignav">
			<div class="bignav-item">
				<p :class="{'common-color': this.type == 1}" @click="select(1)">淘宝</p>
			</div>
			<div class="bignav-item">
				<p :class="{'common-color': this.type == 2}" @click="select(2)">京东</p>
			</div>
			<div class="bignav-item">
				<p :class="{'common-color': this.type == 3}" @click="select(3)">拼多多</p>
			</div>			
		</div>
		<div class="nav border-1px">
			<ul class="nav-items">
				<li class="nav-item"
					@click="change(1)"
				>
					<p :class="[ isStyle1 ? 'common-color' : '' ]">综合</p>
				</li>
				<li class="nav-item"
					@click="change(2)"
				>
					<p :class="[ isStyle2 ? 'common-color' : '' ]">最新</p>
				</li>
				<li class="nav-item"
					@click="change(3)"
				>
					<p :class="[ isStyle3 ? 'common-color' : '' ]">佣金比例</p>
				</li>
				<li class="nav-item"
					@click="change(4)"
				>
					<p :class="[ isStyle4 ? 'common-color' : '' ]">价格<span :class="[ isStyle4 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
				<li class="nav-item"
					@click="change(5)"
				>
					<p :class="[ isStyle5 ? 'common-color' : '' ]">佣金<span :class="[ isStyle5 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
			</ul>
		</div>
		</div>
		<div class="station" id="station"></div>
		<Scroll :on-refresh="onRefresh" 
			:on-infinite="onInfinite" 
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
			ref="my_scroller"
		>
			<GoodOne :goodsList=goodsList :proType=type id="goods"></GoodOne>
		</Scroll>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoTop from '../components/GoTop.vue'
	import GoodOne from '../components/goods_two.vue'
	import Scroll from '../components/my_scroll.vue'
	export default{
		components: {
			GoTop,
			GoodOne,
			Scroll
		},
		data () {
			return{
				topclass: false,
				scrollNum: 4, 
				loadingText: '加载中...',
				isStyle1: true,
				isStyle2: false,
				isStyle3: false,
				isStyle4: false,
				isStyle5: false,
				isLow: false,
				keyword: this.$route.params.keyword,
				type: this.$route.params.id,
				page: 1,
				sort: 0,
				sort_type: 0,
				is_coupon: 1,
				goodsList: [],
				goodList: [],
				keyList: [],
				searchShow: window.localStorage.getItem("taobao_search_mode"),
				colorLeft: window.localStorage.getItem("left"), 
				colorRight: window.localStorage.getItem("right"),
				isHeader: true,
			}
		},
		// beforeRouteEnter(to,from,next){
		// 	next(vm => {
		// 		var scroller = vm.$refs.my_scroller
		// 		if(vm && scroller){//通过vm实例访问this
		// 			console.log(scroller)
		// 			scroller.$el.scrollTop = parseInt(sessionStorage.getItem("askPositon"))
		// 			setTimeout(function () {
		// 				vm.$refs.my_scroller.$el.scrollTop = parseInt(sessionStorage.getItem("askPositon"))
		// 			},0)//同步转异步操作tTime
		// 		}
		// 	})
		// },
		// beforeRouteLeave(to,from,next){//记录离开时的位置
		// 	sessionStorage.askPositon = this.$refs.my_scroller.$el.scrollTop
		// 	next()
		// },
		beforeMount(){			
			if(this.searchShow == 1){
				this.is_coupon = 0
			}else if(this.searchShow == 0 || this.searchShow == 2){
				this.is_coupon = 1
			}
			var more = localStorage.getItem("options")
			if(more != undefined && more.length > 0){
				this.list = JSON.parse(more)
			}
			if(this.list == undefined ){
				this.list = []
			}
			
		},
		mounted(){
			document.title = this.keyword
			this.getData()
		},
		watch: {
		    '$route' (to, from) {
		    	this.$router.go(0)
			},
			keyword: function(){
				this.getKeyword()
			}
		},
		methods: {
			getKeyword: function(){
				this.$jsonp('https://suggest.taobao.com/sug?code=utf-8&q=' + this.keyword + '&_ksTS=1537438744083_997&k=1&area=c2c&bucketid=7&qq-pf-to=pcqq.c2c').then( res => {
					var ret =res.result
					this.keyList = ret
				})
			},
			goKey: function(item){
				let keyword = item[0]
				this.$router.push('/searchdetail/' + this.type + '/' + keyword)
			},
			goTop: function(){
                document.getElementById("goods").scrollIntoView()
            },
            goBack: function(){
            	this.$router.push('/search')
            },
            topshow: function(a){
		    	this.topclass = a
		    },
            onRefresh(done) {
            	document.getElementById('help').style.display="none"
            	this.page = 1
	            this.getData()
	            done()
	            Toast({
				    message: '刷新完成',
				    position: 'bottom',
				    duration: 500
				});     
		    },
		    onInfinite(done) {
		    	document.getElementById('help').style.display="none";
		    	document.querySelector('.load-more').style.display = 'block';
		    	var vm = this;
		    	if (vm.type == 1) {
					var params = new URLSearchParams();
					params.append('keyword', vm.keyword);
					params.append('sort', vm.sort);
					params.append('page', vm.page);
					params.append('is_coupon', vm.is_coupon);
	                axios.post(Http.FulSearch, params).then( res =>{
						var ret = res.data;
						var arr = ret['data'];
						vm.goodsList = vm.goodsList.concat(arr);
						if (arr.length > 9) {
							vm.page ++;
							// vm.$el.querySelector('.load-more').style.display = 'none';
							done() // call done
						}else{
							vm.loadingText = "加载完毕";
							setTimeout(hideLoad, 2000);
							function hideLoad (){
								document.querySelector('.load-more').style.display = 'none';
							}
						}
					})
		    	}else if (vm.type == 2) {
		    		var params = new URLSearchParams();
					params.append('keyword', vm.keyword);
					params.append('page', vm.page);
					params.append('sort_type', vm.sort_type);
	                axios.post(Http.JdSearch, params).then( res =>{
						var ret = res.data;
						var arr = ret['data'];
						vm.goodsList = vm.goodsList.concat(arr);
						if (arr.length > 9) {
							vm.page ++;
							// vm.$el.querySelector('.load-more').style.display = 'none';
							done() // call done
						}else{
							vm.loadingText = "加载完毕";
							setTimeout(hideLoad, 2000);
							function hideLoad (){
								document.querySelector('.load-more').style.display = 'none';
							}
						}
					})
		    	}else{
		    		var params = new URLSearchParams();
					params.append('keyword', vm.keyword);
					params.append('page', vm.page);
					params.append('sort_type', vm.sort_type);
					axios.post(Http.PddSearch, params).then( res => {
						var ret = res.data;
						var arr = ret['data']['list'];
						vm.goodsList = vm.goodsList.concat(arr);
						if (arr.length > 9) {
							vm.page ++;
							// vm.$el.querySelector('.load-more').style.display = 'none';
							done() // call done
						}else{
							vm.loadingText = "加载完毕";
							setTimeout(hideLoad, 2000);
							function hideLoad (){
								document.querySelector('.load-more').style.display = 'none';
							}
						}					
					})
		    	}
		    	
		    },
			goSearch: function(){
				var self = this;
				if(self.keyword == ''){
					Toast('查询不能为空')
				}else{
					let keyword = self.keyword;
					if(self.list == undefined && self.list.length === 0){
						self.list.push({'title': keyword});
					}else{
						var y,z;
						var len = self.list.length;
						for(var i = 0; i < len; i++){
							if( self.list[i].title == keyword){
								y=2;
								z=i;
							}
						}
						if(y!=2){
							self.list.push({'title': keyword});
							var str = JSON.stringify(self.list);
							window.localStorage.setItem("options", str);
							self.$router.push('/searchdetail/' + self.type + '/' + keyword);
						}else if (y == 2){
							self.list.splice(z, 1);
							self.list.unshift({"title": keyword});
							var str = JSON.stringify(self.list);
							window.localStorage.setItem("options", str);
							self.$router.push('/searchdetail/' + self.type + '/' + keyword);
						}
					}															
				}	
			},
			change: function(index){
				if(index == 1){
					this.isStyle1 = true;
					this.isStyle2 = false;
					this.isStyle3 = false;
					this.isStyle4 = false;
					this.isStyle5 = false;
					this.sort = 1;
					this.sort_type = 0;
				}else if(index == 2){
					this.isStyle1 = false;
					this.isStyle2 = true;
					this.isStyle3 = false;
					this.isStyle4 = false;
					this.isStyle5 = false;
					this.sort = 2;
					if(this.isLow == false){
						this.sort_type = 1;
						this.isLow =true;
					}else{
						this.sort_type = 2;
						this.isLow = false;
					}
				}else if(index == 3){
					this.isStyle1 = false;
					this.isStyle2 = false;
					this.isStyle3 = true;
					this.isStyle4 = false;
					this.isStyle5 = false;
					this.sort = 3;
					if(this.isLow == false){
						this.sort_type = 3;
						this.isLow =true;
					}else{
						this.sort_type = 4;
						this.isLow = false;
					}
				}else if(index == 4){
					this.isStyle1 = false;
					this.isStyle2 = false;
					this.isStyle3 = false;
					this.isStyle4 = true;
					this.isStyle5 = false;
					if(this.isLow == false){
						this.sort =5;
						this.sort_type = 5;
						this.isLow =true;
					}else{
						this.sort = 4;
						this.sort_type = 6;
						this.isLow = false;
					}
				}else if(index == 5){
					this.isStyle1 = false;
					this.isStyle2 = false;
					this.isStyle3 = false;
					this.isStyle4 = false;
					this.isStyle5 = true;
					if(this.isLow == false){
						this.sort =6;
						this.sort_type = 7;
						this.isLow =true;
					}else{
						this.sort = 7;
						this.sort_type = 8;
						this.isLow = false;
					}
				}
				this.page = 1;
				document.getElementById("station").scrollIntoView();
				this.getData()
			},
			select: function(id){
				this.type = id;
				this.page = 1;
				this.$router.push('/searchdetail/' + this.type + '/' + this.keyword);
			},
			getData(){
				var params = new URLSearchParams();
				params.append('keyword', this.keyword);
				params.append('sort', this.sort);
				params.append('page', this.page);
				params.append('is_coupon', this.is_coupon);
				if( this. type == 1 ){
					axios.post(Http.FulSearch, params).then( res => {
						var ret = res.data;
						if (ret.code == 1) {
							this.goodsList = ret['data'];
							this.page = 2;
							if (this.goodsList.length < 10) {
								document.querySelector('.load-more').style.display = 'none';
							}
						}else{
							document.querySelector('.load-more').style.display = 'none';
						}					
					})
				}else if ( this.type == 2 ) {
					params.delete("is_coupon");
					params.delete("sort");
					params.append('sort_type', this.sort_type)
					axios.post(Http.JdSearch, params).then( res => {
						var ret = res.data;
						if (ret.code == 1) {
							this.goodsList = ret['data'];
							this.page = 2;
							if (this.goodsList.length < 10) {
								document.querySelector('.load-more').style.display = 'none';
							}
						}else{
							document.querySelector('.load-more').style.display = 'none';
						}					
					})
				}else if ( this.type == 3 ) {
					params.delete("is_coupon");
					params.delete("sort");
					params.append('sort_type', this.sort_type)
					axios.post(Http.PddSearch, params).then( res => {
						var ret = res.data;
						if (ret.code == 1) {
							this.goodsList = ret['data']['list'];
							this.page = 2;
							if (this.goodsList.length < 10) {
								document.querySelector('.load-more').style.display = 'none';
							}
						}else{
							document.querySelector('.load-more').style.display = 'none';
						}					
					})
				}

			}
		},
		destroyed () {//离开该页面需要移除这个监听的事件
			this.isHeader = false;
            // window.removeEventListener('scroll', this.handleScroll)
        }
	}
</script>
<style lang="scss" scoped>
	.search{
		background: #f1f1f7;
		.search-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			height: 0.6rem;
			padding: 0.14rem 0;
			width: 100%;
			background: #fff;
			.sh-back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				text-align: center;
				i{
					font-size: 0.44rem;
				}
			}
			.sh-content{
				display: -webkit-box;
				    display: -webkit-flex;
				        display: -ms-flexbox;
				            display: flex;
				margin: 0 1rem 0 0.88rem;
				background: #eee;
				height: 0.6rem;
				line-height: 0.6rem;
				border-radius: 0.3rem;
				i{
					margin-top: 0.08rem;
					margin-left: 0.3rem;
					margin-right: 0.3rem;
					width: 0.44rem;
					height: 0.44rem;
					line-height: 0.44rem;
					background: url(../assets/img/taobao.png) center center no-repeat;
					background-size: contain;
					&.pdd{
						background: url(../assets/img/pinduoduo_icon.png) center center no-repeat;
						background-size: contain;
					}
					&.jd{
						background: url(../assets/img/jd.png) center center no-repeat;
						background-size: contain;
					}
				}
				input{
					flex: 1;
					font-size: 0.26rem;
					color: #666;
					overflow: hidden;
					margin-right: 0.3rem;
				}
			}
			.sh-btn{
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				height: 0.88rem;
				p{
					margin-top: 0.14rem;
					margin-right: 0.24rem;
					height: 0.6rem;
					line-height: 0.6rem;
					font-size: 0.28rem;
				}
			}
		}
		.float-key{
			position: fixed;
			top: 0.89rem;
			left: 0;
			z-index: 999;
			background: #f5f5f5;
			width: 100%;
			min-height: calc(100% - 0.89rem);
			.fy-item{
				margin-left: 4%;
				padding-right: 4%;
				width: 92%;
				height: 0.88rem;
				line-height: 0.88rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				p{
					font-size: 0.26rem;
					color: #777;
				}
				i{
					font-size: 0.34rem;
					color: #999;
				}
			}
		}
		.bignav{
			position: fixed;
			top: 0.88rem;
			left: 0;
			z-index: 99;
			display: flex;
			align-items: center;
			width: 100%;
			height: 0.8rem;
			line-height: 0.8rem;
			background: #fff;
			.bignav-item{
				flex: 0 0 33.33%;
				font-size: 0.26rem;
				p{
					width: 40%;
					height: 0.8rem;
					margin-left: 30%;				
					&.common-color{
						font-size: 0.28rem;
						font-weight: 700;
						box-sizing: border-box;
						border-bottom: 0.04rem solid #ff3c00;
					}
				}
			}	
		}
		.nav{
			position: fixed;
			top: 1.67rem;
			left: 0;
			z-index: 99;
			width: 100%;
			height: 0.8rem;
			line-height: 0.8rem;
			background: #fafafa;
			&.active{
				top: 0.88rem;
			}
			.nav-items{
				display: flex;
				align-items: center;
				.nav-item{
					flex: 0 0 20%;
					p{
						color: #666;
						&.common-color{
							color: $color;
						}
						span{
							display: inline-block;
							margin-left: 0.08rem;
							width: 0.12rem;
							height: 0.8rem;
							vertical-align: top;
							&.gray{
								background: url(../assets/img/paixu_default.png) center center no-repeat;
								background-size: contain;
							}
							&.high{
								background: url(../assets/img/paixu_default_top.png) center center no-repeat;
								background-size: contain;
							}
							&.low{
								background: url(../assets/img/paixu_default_down.png) center center no-repeat;
								background-size: contain;
							}
						}
					}
				}
			}			
		}
		.station{
			width: 100%;
			height: 2.46rem;
		}
	}
</style>